<template>
  <div class="content">
    <p>基础用法</p>
    <div class="group anvil">
      <anvil-date-picker
        ref="picker2"
        v-model="value1"
        type="date"
        placeholder="选择日期"
        @change="handleChange2"
        @blur="handleBlur2"
        @focus="handleFocus2"
      >
      </anvil-date-picker>
      <el-button @click="handleEventFocus2">触发focus事件</el-button>
      <anvil-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
      >
      </anvil-date-picker>
    </div>

    <div class="group el">
      <el-date-picker
        ref="picker1"
        v-model="value1"
        type="date"
        placeholder="选择日期"
        @change="handleChange1"
        @blur="handleBlur1"
        @focus="handleFocus1"
      >
      </el-date-picker>
      <el-button @click="handleEventFocus1">触发focus事件</el-button>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>

    <p>其他日期单位</p>
    <div class="group anvil">
      <div class="container">
        <div class="block">
          <span class="demonstration">周</span>
          <anvil-date-picker
            v-model="value1"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
          >
          </anvil-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">月</span>
          <anvil-date-picker v-model="value2" type="month" placeholder="选择月">
          </anvil-date-picker>
        </div>
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">年</span>
          <anvil-date-picker v-model="value3" type="year" placeholder="选择年">
          </anvil-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">多个日期</span>
          <anvil-date-picker
            type="dates"
            v-model="value4"
            placeholder="选择一个或多个日期"
          >
          </anvil-date-picker>
        </div>
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">多个月</span>
          <anvil-date-picker
            type="months"
            v-model="value5"
            placeholder="选择一个或多个月"
          >
          </anvil-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">多个年</span>
          <anvil-date-picker
            type="years"
            v-model="value6"
            placeholder="选择一个或多个年"
          >
          </anvil-date-picker>
        </div>
      </div>
    </div>

    <div class="group el">
      <div class="container">
        <div class="block">
          <span class="demonstration">周</span>
          <el-date-picker
            v-model="value1"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
          >
          </el-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">月</span>
          <el-date-picker v-model="value2" type="month" placeholder="选择月">
          </el-date-picker>
        </div>
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">年</span>
          <el-date-picker v-model="value3" type="year" placeholder="选择年">
          </el-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">多个日期</span>
          <el-date-picker
            type="dates"
            v-model="value4"
            placeholder="选择一个或多个日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="container">
        <div class="block">
          <span class="demonstration">多个月</span>
          <el-date-picker
            type="months"
            v-model="value5"
            placeholder="选择一个或多个月"
          >
          </el-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">多个年</span>
          <el-date-picker
            type="years"
            v-model="value6"
            placeholder="选择一个或多个年"
          >
          </el-date-picker>
        </div>
      </div>
    </div>

    <p>选择日期范围</p>
    <div class="group anvil">
      <div class="block">
        <span class="demonstration">默认</span>
        <anvil-date-picker
          v-model="value7"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <anvil-date-picker
          v-model="value8"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </anvil-date-picker>
      </div>
    </div>
    <div class="group el">
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value7"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value8"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
    </div>

    <p>选择月份范围</p>
    <div class="group anvil">
      <div class="block">
        <span class="demonstration">默认</span>
        <anvil-date-picker
          v-model="value9"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <anvil-date-picker
          v-model="value10"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        >
        </anvil-date-picker>
      </div>
    </div>
    <div class="group el">
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value9"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value10"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
    </div>

    <p>日期格式</p>
    <div class="group anvil">
      <div class="block">
        <span class="demonstration">默认为 Date 对象</span>
        <div class="demonstration">值：{{ value11 }}</div>
        <anvil-date-picker
          v-model="value11"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">使用 value-format</span>
        <div class="demonstration">值：{{ value12 }}</div>
        <anvil-date-picker
          v-model="value12"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="YYYY-MM-DD"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">时间戳</span>
        <div class="demonstration">值：{{ value13 }}</div>
        <anvil-date-picker
          v-model="value13"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
        >
        </anvil-date-picker>
      </div>
    </div>
    <div class="group el">
      <div class="block">
        <span class="demonstration">默认为 Date 对象</span>
        <div class="demonstration">值：{{ value11 }}</div>
        <el-date-picker
          v-model="value11"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">使用 value-format</span>
        <div class="demonstration">值：{{ value12 }}</div>
        <el-date-picker
          v-model="value12"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="YYYY-MM-DD"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">时间戳</span>
        <div class="demonstration">值：{{ value13 }}</div>
        <el-date-picker
          v-model="value13"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
        >
        </el-date-picker>
      </div>
    </div>

    <p>默认显示日期</p>
    <div class="group anvil">
      <div class="block">
        <p>组件值：{{ value14 }}</p>
        <anvil-date-picker
          v-model="value14"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </anvil-date-picker>
      </div>
    </div>
    <div class="group el">
      <div class="block">
        <p>组件值：{{ value14 }}</p>
        <el-date-picker
          v-model="value14"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",

      value7: "",
      value8: "",

      value9: "",
      value10: "",

      value11: "",
      value12: "",
      value13: "",

      value14: "",
    };
  },

  methods: {
    handleChange1(value) {
      console.log(
        "🚀 ~ file: date-picker.vue:79 ~ handleChange1 ~ value:",
        value
      );
    },
    handleBlur1(value) {
      console.log(
        "🚀 ~ file: date-picker.vue:83 ~ handleBlur1 ~ value:",
        value
      );
    },
    handleFocus1(value) {
      console.log(
        "🚀 ~ file: date-picker.vue:87 ~ handleFocus1 ~ value:",
        value
      );
    },
    handleEventFocus1() {
      this.$refs.picker1.focus();
    },

    handleChange2(value) {
      console.log(
        "🚀 ~ file: date-picker.vue:105 ~ handleChange2 ~ value:",
        value
      );
    },
    handleBlur2(value) {
      console.log(
        "🚀 ~ file: date-picker.vue:109 ~ handleBlur2 ~ value:",
        value
      );
    },
    handleFocus2(value) {
      console.log(
        "🚀 ~ file: date-picker.vue:113 ~ handleFocus2 ~ value:",
        value
      );
    },
    handleEventFocus2() {
      this.$refs.picker2.focus();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  > p {
    color: red;
    font-weight: bold;
  }

  .group {
    /* border: 1px solid red; */
    padding: 6px;

    &.anvil {
      border-color: skyblue;
    }

    &.el {
      border-color: gray;
      display: block;
    }
  }
}
</style>
